<!DOCTYPE html>

<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>插槽</title>
      <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
      <script src="/javascripts/vue@3.0.11.js" ></script>
  </head>
  <body>

    <div class="container" id="app">
        <cart-item class="border">
            <span class="col-1">1</span>
            <span class="col-1">2002</span>
            <span class="col-3">张仙姑画的很有用的符</span>
            <span class="col-1">1.99</span>
            <span class="col-3">
                <div class="btn-group btn-group-sm">
                    <a class="btn btn-primary">-</a>
                    <a class="btn "></a>
                    <a class="btn btn-primary">+</a>
                </div>
            </span>
            <span class="col-1">199</span>
            <span class="col-2">
                <a class="btn btn-primary btn-sm">删除</a>
            </span>
        </cart-item>

        <hr>

        <cart-item class="border"></cart-item>

        <hr>

        <cart-item class="border">
            <span class="col-12">不是默认内容</span>
        </cart-item>
    </div>

    <script>
        const app = Vue.createApp({});

        app.component( 'CartItem' , {
            template: `<div class="row">
                          <slot>默认内容</slot>
                       </div>`
        });

        app.mount( '#app' );
    </script>

  </body>
</html>